import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TouchableWithoutFeedback, ScrollView, FlatList } from "react-native";
import CustomerHeader from "../../widget/customerHeader";
import Swiper from "react-native-swiper";
import {width} from "../../util/apdater_util";
import ScrollableTabView, { ScrollableTabBar,DefaultTabBar} from 'react-native-scrollable-tab-view';
import PropTypes from "prop-types";
import * as RootNavigation from '../../../App'

class MallCustomTabBar extends Component{
  constructor(props) {
    super(props);
  }
  static propTypes = {
    tabLabelNames: PropTypes.array, // tabs
    goToPage: PropTypes.func, // 跳转到对应tab的方法
    tabs: PropTypes.array,
    activeTab: PropTypes.number,
    onPress:PropTypes.func
  }
  render() {
    const containerWidth = this.props.containerWidth;
    const numberOfTabs = this.props.tabs.length;
    const translateX = this.props.scrollValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, containerWidth / numberOfTabs],
    });
    return (
      <View style={[this.props.style,styles.tabs]}>
        {this.props.tabs.map((tab,i)=>{
          return <TouchableWithoutFeedback style={styles.tabBox} key={tab} onPress={()=>this.props.goToPage(i)}>
            <View style={styles.tabBox}>
              <Text style={[styles.tab,i === this.props.activeTab?{fontSize:14,color:'#222222',fontWeight:'500'}:{}, this.props.textStyle]}>{this.props.tabLabelNames[i].label}</Text>
              {i===this.props.activeTab?<Image style={styles.lineBar}  source={require('../../img/line_bar.png')}></Image>:null}
            </View>
          </TouchableWithoutFeedback>
        })}
      </View>
    );
  }
}

export default class MallList extends Component{
  constructor(props) {
    super(props);
    this.tabView=null;
    this.state={
      bannerList:['https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png'],
      tabList:[{
        label:'全部',
        index:1
      },{
        label:'美食',
        index:2
      },{
        label:'服饰',
        index:3
      },{
        label:'日用',
        index:4
      }],
      dataList:[{
        label:'1',
        value:1
      },{
        label:'2',
        value:2
      },{
        label:'3',
        value:3
      },{
        label:'3',
        value:3
      }]
    }
  }
  onChangeTab(obj){
    console.log(obj)
  }
  selectTabChange(i){
    if(this.tabView)this.tabView.goToPage(i)
  }

  goToDetail(){
    RootNavigation.navigate('ProdDetail',{})
  }

  goToOrder(){
    RootNavigation.navigate('OrderList',{})
  }

  _renderItem=(info)=>{
    return (
      <TouchableWithoutFeedback onPress={this.goToDetail}>
        <View style={[styles.cell,info.index%2===1?{marginLeft:6}:null]}>
          <Image style={styles.prodPic} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>
          <Text style={styles.prodName} numberOfLines={1}>碧水蓝岸手动晴雨伞</Text>
          <View style={styles.prodFooter}>
            <Text style={styles.prodScore}>2000积分</Text>
            <Text style={styles.sale}>已售198</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    )
  }

  render(){
    const bannerEle=[]
    this.state.bannerList.forEach((url,index)=>{
      bannerEle.push(
        <TouchableWithoutFeedback style={{flex:1,borderRadius:10,overflow:"hidden"}} key={index}>
          <Image style={{flex:1,borderRadius:10,overflow:'hidden'}} source={{uri:url}} keyExtractor={url=>url}></Image>
        </TouchableWithoutFeedback>
      )
    })
    return (
      <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
        <CustomerHeader title={'积分商场'} leftOnPress={()=>{this.props.navigation.pop()}}>
          <TouchableWithoutFeedback onPress={()=>{this.goToOrder()}}>
            <Text style={styles.order}>兑换订单</Text>
          </TouchableWithoutFeedback>
        </CustomerHeader>
        <ScrollView showsVerticalScrollIndicator={false}>
          <View style={styles.banner}>
            <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} dot={<View style={{ backgroundColor: 'gray', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                    activeDot={<View style={{ backgroundColor: 'white', width: 5, height: 5, borderRadius: 2.5, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                    paginationStyle={{
                      bottom: 5,
                      left:'100%',
                      transform:[{translateX:-30}]
                    }}
            >{bannerEle}</Swiper>
          </View>
          <View>
            <View style={styles.sectionHeader}>
              <Text style={styles.hotTitle}>热门商品</Text>
              <View style={styles.refreshBox}>
                <Image style={styles.refreshIcon} source={require('../../img/refresh.png')}></Image>
                <Text style={styles.refreshTitle}>换一批</Text>
              </View>
            </View>
            <View>
              <ScrollView scrollEnabled={true} horizontal={true}>
                <View style={styles.hotGood}>
                  <Image style={styles.goodPic} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>
                  <View style={styles.scoreBox}>
                    <Text style={styles.scoreTitle}>2000积分</Text>
                  </View>
                </View>
                <View style={styles.hotGood}>
                  <Image style={styles.goodPic} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>
                  <View style={styles.scoreBox}>
                    <Text style={styles.scoreTitle}>2000积分</Text>
                  </View>
                </View>
                <View style={styles.hotGood}>
                  <Image style={styles.goodPic} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>
                  <View style={styles.scoreBox}>
                    <Text style={styles.scoreTitle}>2000积分</Text>
                  </View>
                </View>
              </ScrollView>
            </View>
            <View>
              <ScrollableTabView initialPage={0} ref={(tabView) => { this.tabView = tabView; }} prerenderingsiblingsNumber={1} scrollWithoutAnimation={false} onChangeTab={this.onChangeTab} onScroll={
                (position) => {
                  console.log('滑动时的位置：' + position);
                }
              } locked={false} renderTabBar={()=><MallCustomTabBar tabLabelNames={this.state.tabList} onPress={this.selectTabChange}/>}>
                <View tabLabel='Tab1' style={{flex: 1}}>
                  <View style={{flex:1 ,width:'100%'}}>
                    <FlatList style={styles.table}
                              data={this.state.dataList}
                              scrollEnabled={false}
                              keyExtractor={item=>item.value}
                              renderItem={this._renderItem}
                              numColumns={2}>
                    </FlatList>
                  </View>
                </View>
                <View tabLabel='Tab2' style={{flex: 1}}>
                  <View style={{flex:1 ,width:'100%'}}>
                    <Text>界面5</Text>
                  </View>
                </View>
                <View tabLabel='Tab3' style={{flex: 1}}>
                  <View style={{flex:1 ,width:'100%'}}>
                    <Text>界面5</Text>
                  </View>
                </View>
                <View tabLabel='Tab4' style={{flex: 1}}>
                  <View style={{flex:1 ,width:'100%'}}>
                    <Text>界面5</Text>
                  </View>
                </View>
              </ScrollableTabView>
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  banner:{
    height:170,
    marginHorizontal:14,
    borderRadius:10,
    backgroundColor:'#fff'
  },
  sectionHeader:{
    backgroundColor: '#F6F6F6',
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    height:40,
    paddingHorizontal:14,
    marginTop:10
  },
  refreshBox:{
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  refreshIcon:{
    width:12,
    height:12
  },
  refreshTitle:{
    color:'#A6A6A6',
    fontSize:11,
    marginLeft:4
  },
  hotTitle:{
    color:'#000000',
    fontSize: 16,
    fontWeight:'500'
  },
  hotGood:{
    width: (width-40)/3.0,
    height:(width-40)/3.0+28,
    backgroundColor:'#fff',
    paddingHorizontal:11,
    paddingVertical:11,
    marginLeft: 10,
    borderRadius:6
  },
  goodPic:{
    width:(width-40)/3.0-22,
    height:(width-40)/3.0-22,
    borderRadius: 2
  },
  scoreBox:{
    height:18,
    borderRadius:9,
    backgroundColor:'#FDE9B6',
    marginTop: 8
  },
  scoreTitle:{
    color:'#986C45',
    fontSize:11,
    flex:1,
    textAlign:'center',
    lineHeight:18
  },
  /**tab**/
  tabs:{
    height:50,
    backgroundColor:'#F6F6F6',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
  },
  tabBox:{
    height:50,
    justifyContent: 'center',
    alignItems:'center'
  },
  tab:{
    color: '#666666',
    fontSize: 14,
    paddingLeft: 10,
    paddingRight:10
  },
  lineBar:{
    position:'absolute',
    width:20,
    height:3,
    bottom:10,
  },
  /*cell*/
  cell:{
    backgroundColor:'#fff',
    marginBottom:7
  },
  prodPic:{
    width:(width-26)/2.0,
    height:(width-26)/2.0,
    borderRadius:4
  },
  prodName:{
    color:'#222222',
    fontSize:12,
    marginTop:10,
    marginLeft:11
  },
  prodFooter:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginTop:24,
    marginLeft:10,
    paddingBottom:18
  },
  prodScore:{
    color:'#E39354',
    fontSize:14,
    fontWeight: '500'
  },
  sale:{
    color:'#9F9F9F',
    fontSize:11,
    marginRight:7
  },
  table:{
    flex:1,
    paddingHorizontal: 10
  },
  order:{
    color:'#000000',
    fontSize:14,
    marginRight:15
  }
})
